import React, { PureComponent } from 'react';
import { Typography, Popover, Form, Input, Radio } from 'antd';
import { withRemove } from './index';
import styles from './index.less';

const { Title } = Typography;

const typeText = {
  title: '一级标题',
  subTitle: '二级标题',
};

@withRemove
class TitleComponent extends PureComponent {
  state = {
    // title subTitle
    type: this.props.data.type,
    content: this.props.data.content,
  };

  handleChange = type => e => {
    const { value } = e.target;
    const { data } = { ...this.props };
    data[type] = value;
    this.props.onChange(data);
    this.setState({ [type]: value });
  };

  render() {
    const { type, content } = this.state;
    const level = type === 'title' ? 3 : 4;
    return (
      <Popover
        placement="right"
        trigger="click"
        content={
          <>
            <Form.Item label="标题内容" className={styles.mb0}>
              <Input
                placeholder="输入标题内容"
                value={content}
                onChange={this.handleChange('content')}
              />
            </Form.Item>
            <Form.Item label="展示类型" className={styles.mb0}>
              <Radio.Group value={type} onChange={this.handleChange('type')}>
                {['title', 'subTitle'].map(v => (
                  <Radio key={v} value={v}>
                    {typeText[v]}
                  </Radio>
                ))}
              </Radio.Group>
            </Form.Item>
          </>
        }
      >
        <Title level={level} className={styles.mb0}>
          {content || '这里编辑标题'}({typeText[type]})
        </Title>
      </Popover>
    );
  }
}

export default TitleComponent;
